<template>
  <div class="masage">
    <div class="special_sort_info">
      <span
        v-for="(index, id) in sort_list.children"
        :key="index.id"
        :class="{ line_w: sort_line == id }"
        @click="click_sort(id)"
      >
        <span>{{ index.name }}</span>
        <span></span>
      </span>
    </div>
    <special_list :special_list="special_list"/>
  </div>
</template>

<script>
import { mapState,mapGetters } from "vuex";
export default {
  data() {
    return {
      sort_line: 0,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    async getdata() {
      await this.$store.dispatch("special_sort", this.$route.query.id);
      await this.$store.dispatch("special_list", {
        tagid: this.sort_list.children[0].special_tag_id,
        id: this.sort_list.children[0].id,
      });
    },
    async click_sort(index) {
      this.sort_line = index;
      await this.$store.dispatch("special_list", {
        tagid: this.sort_list.children[index].special_tag_id,
        id: this.sort_list.children[index].id,
      });
    },
  },
  computed: {
    ...mapState({
      sort_list: (state) => state.special.special_info,
      special_list: (state) => state.special.special_info_list,
    }),
  },
};
</script>

<style lang="less">
.masage {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
  .special_sort_info {
    display: flex;
    justify-content: left;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    
    span {
      cursor: pointer;
      width: 100px;
      text-align: center;
    }
    .line_w {
      span:nth-child(1) {
        font-weight: bold;
        display: block;
        margin-bottom: 3px;
      }
      span:nth-child(2) {
        display: flex;
        width: 10px;
        border-radius: 1.5px;
        height: 3px;
        background-color: #00a9ff;
        margin: 0 auto;
      }
    }
  }
}
</style>